<!--店铺管理-->
<script setup lang="ts">
  import {AxiosPromise} from "axios";
  import lodash from 'lodash-es'

  defineOptions({
    name: "Accessory",
    inheritAttrs: false,
  });

  import {
    getAccessoryPage,
    getAccessoryForm,
    saveAccessory,
    deleteAccessory,
  } from "@/api/accessory";
  import {getCompanyList} from "@/api/company";
  import {getSubjectsList} from "@/api/subjects";

  import { AccessoryQuery, AccessoryForm } from "@/api/accessory/types";
  import moment from "moment"
  import {CompanyForm} from "@/api/company/types";
  import {SubjectsForm} from "@/api/subjects/types";

  const queryFormRef = ref(ElForm);
  const dataFormRef = ref(ElForm);

  const loading = ref(false);
  const ids = ref<number[]>([]);
  const total = ref(0);
  const companyList = ref<CompanyForm[]>();
  const subjectsList = ref<SubjectsForm[]>();

  const queryParams = reactive<AccessoryQuery>({
    pageNum: 1,
    pageSize: 20,
  });

  const accessoryList = ref<[]>();

  const dialog = reactive<DialogOption>({
    visible: false,
  });

  const formData = reactive<AccessoryForm>({});

  const rules = reactive({
    companyCode: [{ required: true, message: "请选择入账主体", trigger: "blur" }],
    accessoryCode: [{ required: true, message: "请输入辅助项序号", trigger: "blur" }],
    accessoryName: [{ required: true, message: "请输入辅助项名称", trigger: "blur" }],
    lastCodeList: [{ required: true, message: "请选择末级科目", trigger: "blur" }],
  });

  /**
   * 查询
   */
  function handleQuery() {
    loading.value = true;
    getAccessoryPage(queryParams)
            .then(({ data }) => {
              accessoryList.value = data.list;
              total.value = data.total;
            })
            .finally(() => {
              loading.value = false;
            });
  }

  /**
   * 重置查询
   */
  function resetQuery() {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    handleQuery();
  }

  /**
   * 行checkbox change事件
   */
  function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id);
  }

  /**
   * 字典类型表单提交
   */
  function handleSubmit() {
    dataFormRef.value.validate((isValid: boolean) => {
      if (isValid) {
        formData.lastCodes = lodash.join(formData.lastCodeList, ',')
        loading.value = false;
        saveAccessory(formData)
                .then(() => {
                  ElMessage.success("保存成功");
                  closeDialog();
                  handleQuery();
                })
                .finally(() => (loading.value = false));
      }
    });
  }

  /**
   * 打开字典类型表单弹窗
   *
   * @param dicTypeId 字典类型ID
   */
  async function openDialog(id?: number) {
    // await getAllCompanyList()
    dialog.visible = true;
    if (id) {
      dialog.title = "修改辅助项";
      getAccessoryForm(id).then(({ data }) => {
        Object.assign(formData, data);
        if (formData.lastCodes !== undefined) {
          formData.lastCodeList = lodash.split(formData.lastCodes, ',')
        }
        // getSubjectsList().then((response) => {
        //   subjectsList.value = response.data;
        // });
      });
    } else {
      dialog.title = "新增辅助项";
    }
  }

  /**
   * 关闭弹窗
   */
  function closeDialog() {
    dialog.visible = false;
    resetForm();
  }

  /**
   * 重置表单
   */
  function resetForm() {
    dataFormRef.value.resetFields();
    dataFormRef.value.clearValidate();
    formData.lastCodeList = []
    subjectsList.value = []
    formData.id = undefined;
  }

  /**
   * 删除事件
   */
  function handleDelete(dictTypeId?: number) {
    const dictTypeIds = [dictTypeId || ids.value].join(",");
    if (!dictTypeIds) {
      ElMessage.warning("请勾选删除项");
      return;
    }

    ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      deleteAccessory(dictTypeIds).then(() => {
        ElMessage.success("删除成功");
        resetQuery();
      });
    });
  }

  const dictDataDialog = reactive<DialogOption>({
    visible: false,
  });

  /**
   * 获取入账主体列表
   *
   */
  async function getAllCompanyList() {
    getCompanyList().then((response) => {
      companyList.value = response.data;
    });
  }

  onMounted(() => {
    handleQuery();
  });
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键词" prop="keywords">
          <el-input
                  v-model="queryParams.keywords"
                  placeholder="辅助项序号/辅助项名称"
                  clearable
                  @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"
          ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <el-button
                v-hasPerm="['sys:accessory:save']"
                type="success"
                @click="openDialog()"
        ><i-ep-plus />新增</el-button
        >
        <el-button
                type="danger"
								v-hasPerm="['sys:accessory:delete']"
                :disabled="ids.length === 0"
                @click="handleDelete()"
        ><i-ep-delete />删除</el-button
        >
      </template>
      <el-table
              size="small"
              :header-row-style="{color: 'dimgray'}"
              v-loading="loading"
              highlight-current-row
              :data="accessoryList"
              border
			  			:height="accessoryList && accessoryList.length > 0 ? 580 : 130"
              @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="辅助项名称1" prop="accessoryName1"/>
        <el-table-column label="辅助项名称2" prop="accessoryName2"/>
        <el-table-column label="辅助项名称3" prop="accessoryName3"/>
        <el-table-column label="辅助项名称4" prop="accessoryName4"/>
        <el-table-column label="辅助项名称5" prop="accessoryName5"/>
        <el-table-column label="辅助项名称6" prop="accessoryName6"/>
        <el-table-column label="辅助项名称7" prop="accessoryName7"/>
        <el-table-column label="辅助项名称8" prop="accessoryName8"/>
        <el-table-column label="辅助项名称9" prop="accessoryName9"/>
        <el-table-column fixed="right" label="操作" align="center" width="220">
          <template #default="scope">
            <el-button
                    v-hasPerm="['sys:accessory:save']"
                    type="primary"
                    link
                    size="small"
                    @click.stop="openDialog(scope.row.id)"
            ><i-ep-edit />编辑</el-button
            >
            <el-button
                    v-hasPerm="['sys:accessory:delete']"
                    type="primary"
                    link
                    size="small"
                    @click.stop="handleDelete(scope.row.id)"
            ><i-ep-delete />删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
              v-if="total > 0"
              v-model:total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="handleQuery"
      />
    </el-card>

    <el-dialog
            v-model="dialog.visible"
            :title="dialog.title"
            width="400px"
            :close-on-click-modal="false"
            @close="closeDialog"
    >
      <el-form
              ref="dataFormRef"
              :model="formData"
              :rules="rules"
              label-width="100px"
      >
        <el-form-item label="辅助项名称1" prop="accessoryName1">
          <el-input v-model="formData.accessoryName1" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称2" prop="accessoryName2">
          <el-input v-model="formData.accessoryName2" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称3" prop="accessoryName3">
          <el-input v-model="formData.accessoryName3" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称4" prop="accessoryName4">
          <el-input v-model="formData.accessoryName4" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称5" prop="accessoryName5">
          <el-input v-model="formData.accessoryName5" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称6" prop="accessoryName6">
          <el-input v-model="formData.accessoryName6" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称7" prop="accessoryName7">
          <el-input v-model="formData.accessoryName7" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称8" prop="accessoryName8">
          <el-input v-model="formData.accessoryName8" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
        <el-form-item label="辅助项名称9" prop="accessoryName9">
          <el-input v-model="formData.accessoryName9" placeholder="请输入辅助项名称" clearable/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
